<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <div
            style="height: 60px; background-color: #409EFF; color: white; display: flex; justify-content: center; align-items: center;">
            <h2 style="margin: 0;">admin管理系统注册页面</h2>
        </div>
        <div class="register-container">
            <div class="register-box">
                <el-form :model="form" :rules="rules" ref="formRef" label-width="150px"
                    style="width: 800px;margin: 10px auto;" enctype="multipart/form-data">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用户账号" prop="name">
                                <el-input v-model="form.name" style="width: 200px;"></el-input>
                            </el-form-item>
                            <el-form-item label="用户姓名" prop="username">
                                <el-input v-model="form.username" style="width: 200px;"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号码" prop="telephone">
                                <el-input v-model="form.telephone" style="width: 200px;"></el-input>
                            </el-form-item>
                            <el-form-item label="账号密码" prop="password">
                                <el-input type="password" v-model="form.password" style="width: 200px;"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="rpassword">
                                <el-input type="rpassword" v-model="form.rpassword" style="width: 200px;"></el-input>
                            </el-form-item>
                            <el-form-item label="用户邮箱" prop="email">
                                <el-input v-model="form.email" style="width: 200px;"></el-input>
                            </el-form-item>
                            <el-form-item label="用户年龄" prop="age">
                                <el-input-number v-model="form.age" style="width: 200px;" :min="18"
                                    :max="50"></el-input-number>
                            </el-form-item>
                            <el-form-item label="用户性别" prop="sex">
                                <el-select v-model="form.sex" style="width: 200px;">
                                    <el-option v-for="item in sexData" :key="item.id" :label="item.name"
                                        :value="item.id">

                                    </el-option>
                                </el-select>
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用户头像" prop="avatar">

                                <el-upload action="#" list-type="picture-card" :auto-upload="false"
                                    :on-exceed="handleExceed" :on-change="submitUpload" accept="image/*"
                                    :file-list="fileList" :limit="1">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="用户角色" prop="role">
                                <el-select v-model="form.role" style="width: 200px;">
                                    <el-option v-for="item in roleData" :key="item.id" :label="item.name"
                                        :value="item.id">

                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item style="margin-top: 20px">
                        <el-button type="primary" class="login-button" @click="Register"
                            style="width: 500px">注册</el-button>
                    </el-form-item>
                    <el-form-item style="margin-top: 20px">
                        <el-button type="success" class="login-button" @click="Login"
                            style="width: 500px">登录</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '../axios/index'
const router = useRouter()
const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'));
    } else {
        if (!value == form.password) {
            callback(new Error('密码不一致'));
        }
        callback();
    }
}

const fileList = ref([])
const roleData = ref([])

const sexData = [{
    id: 1,
    name: '男'
}, {
    id: 0,
    name: '女'

}]
const form = reactive({
    name: "",
    username: "",
    password: "",
    rpassword: "",
    telephone: "",
    email: "",
    sex: 1,
    age: 20,
    role: "",
    avatar: "",
})
const formRef = ref(null)
const rules = {
    name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '3-20个字符', trigger: 'blur' }
    ],
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 8, message: '2-8个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '6-16个字符', trigger: 'blur' }
    ],
    rpassword: [
        { required: true, validator: validatePass, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '6-16个字符', trigger: 'blur' }
    ],
    role: [
        { required: true, message: '请选择角色', trigger: 'change' }
    ],
    avatar: [
        { required: true, message: '请输入头像', trigger: 'blur' }
    ]

    ,
    telephone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { min: 11, max: 11, message: "请输入11位手机号", trigger: 'blur' },
        { pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(18[0-9])|166|198|199|(147))\d{8}$/, message: "请输入正确的手机号", trigger: 'blur' }

    ]
    ,

    sex: [
        { required: true, message: '请输入用户性别', trigger: 'blur' }
    ]
    ,
    age: [
        { required: true, message: '请输入用户年龄', trigger: 'blur' }
    ]
    ,
    email: [
        { required: true, message: '请输入用户邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]

}
function Register() {
    formRef.value.validate(valid => {
        if (valid) {

            api.post('/user/register', form).then(res => {
                if (res.code == 200) {
                    ElMessage.success("注册成功")

                    router.push('/Login');
                } else {
                    ElMessage.error(res.msg)

                }
            })
        } else {
            ElMessage.error('请填写完整信息')

            return false;
        }
    })
}
function submitUpload(file) {
    let fd = new FormData()
    fd.append('file', file.raw)
    fd.append('name', file.name)
    api.post('/file/upload', fd).then(res => {
     
        if (res.code === 200) {
            form.avatar = res.data.url
            ElMessage.success("上传成功！")

        } else {
            ElMessage.error("上传失败！")

        }
    })
}
function handleExceed(files) {
    ElMessage.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件`)
}
function loadRole() {
    api.post("/role/listPage", {
        pageSize: 1000,
        pageNum: 1,
        param: {
            register: 1 + '',
            status: 1 + '',
        }
    }).then((res) => {
        if (res.code == 200) {
            roleData.value = res.data
            if (roleData.value.length > 0) {
                form.role = roleData.value[0].id
            }

        } else {
            ElMessage({
                message: '数据查询失败',
                type: "error"
            })
        }
    })
}
function Login() {
    router.push({
        path: "/Login",
    });
}


onMounted(() => {
    loadRole()
})
</script>
<!--  样式 -->
<style scoped>
.register-container {
    align-items: center;
    justify-content: center;
    height: 88vh;
    display: flex;
    background-size: 100% 100%;
    background-image: url(http://localhost:8888/file/bj2);
}

.register-box {
    width: 800px;
    border-radius: 6px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    backdrop-filter: blur(10px);
    text-align: center;
    backdrop-filter: blur(10px);
}
</style>